common={
    initCatalogueMagePage:function(){
        // 绑定dom对象
        this.obj = {
            searchText:$('#searchText'),
        };
        // 声明全局变量
        this.vars = {
            map:"",
            map1:"",
            datareaslut:[],
            markers:[],
            dataAttrmt:[],//marker 轨迹查看
        };
        this.mardata();
        this.btnEvent();
        this.allTable(this.vars.datareaslut)
    },
    mardata:function(){
        var self=this;
        for (var i = 0; i < 10; i++) {
            num = Math.floor(Math.random() * 10);
            tlat = 108.939621 + Math.random() * 10 - 5;
            tlng = 34.343147 + Math.random() * 10 - 5;
            self.vars.datareaslut.push({
                id: i,
                color:"蓝色",
                carPi: "陕A" + Math.floor(Math.random() * 89999 + 10000),
                vehicleId:i
            })
        };
    },
    allTable:function(data){
        console.log(data)
        var self=this;
        $(".ssjk_centerposition ul").html();
        var tableStr="";
        for(var i=0;i<data.length;i++){
            tableStr+="<li>"+
                "<div class='cnf_sigin'>"+
                "<div class='cnf_signleft'>"+
                "<span class='cnf_bluecolor' data-href='"+data[i].color+"'><em>"+data[i].carPi+"</em></span>"+
                "<span class='cnf_kai'>ACC 开</span>"+
                "</div>"+
                "<div class='cnf_toggle' data-href='"+data[i].vehicleId+"'>" +
                "<ul>" +
                    "<li data-href='"+(i*4+1)+"' data-id='"+data[i].id+"'>通道1</li>"+
                    "<li data-href='"+(i*4+2)+"' data-id='"+data[i].id+"'>通道2</li>"+
                    "<li data-href='"+(i*4+3)+"' data-id='"+data[i].id+"'>通道3</li>"+
                    "<li data-href='"+(i*4+4)+"' data-id='"+data[i].id+"'>通道4</li>"+
                "</ul>"+
                "</div>"+
                "</div>"+
                "</li>"
        }
        $(".ssjk_centerposition ul").html(tableStr);
        var attrId=[];
        $(".ssjk_centerposition ul li").click(function(){
            $(this).find(".cnf_toggle").toggle();
            $(this).find(".cnf_toggle ul li").click(function(e){
                e.stopPropagation();
                e.preventDefault();
                var id=$(this).attr("data-href");
                var vehicleid=$(this).attr("data-id");
                var Iindex=$(this).index()+1;
                attrId.push({
                    "id":id,
                    "vehicleid":vehicleid,
                    "Iindex":Iindex
                });
                $(".jk_main ul li .mon_rain").attr("id",id);
                var width=$(".jk_main ul li").width();
                var height=$(".jk_main ul li").height();
                if(height>=300){
                    self.creatVideo(id,width,height,true,false);
                }else{
                    self.creatVideo(id,width,"300",true,false);
                }


            })
        });
        console.log(attrId);
        function creatATTR(controls){
            $.each(attrId,function(i,dom){
                console.log(attrId[i])
                $(".jk_main ul li .mon_rain").eq(i).attr("id",attrId[i].id);
                var width=$(".jk_main ul li").eq(i).width();
                var height=$(".jk_main ul li").eq(i).height();
                self.creatVideo(attrId[i].id,width,height,controls);
            })
        }
        $(".ssjk_maptitright span").click(function(){
            creatATTR(true)
        })
        $(".ssjk_maptitrightvideo span").click(function(){
            var index=$(this).index();
            $(this).addClass("ssjk_active").siblings("").removeClass("ssjk_active");
            if(index==0){
                creatATTR(true,false)
            }
            if(index==1){
                creatATTR(true,false)
            }
        })
    },
    creatVideo:function(id,width,height,autostart,repeatmn){
        var player = cyberplayer(id).setup({
            width: width,
            height: height,
            file: "rtmp://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1", // <—rtmp直播地址
            autostart: autostart,
            stretching: "uniform",
            volume: 100,
            controls: true,
            repeat: repeatmn,
            rtmp: {
                reconnecttime: 5, // rtmp直播的重连次数
                bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒
            },
            ak: "976604a77e2c40fdab9cf7f054ddba12"
        });
    },
    btnEvent:function(){
        $("#time_add").datePicker({
            format: 'YYYY-MM-DD HH:mm',
            isRange: true,
            hide: function () {
                // self.vars.areaTimeData.startTime=this.$input.eq(0).val();
                // self.vars.areaTimeData.endTime=this.$input.eq(1).val();

            }
        });
        var attr="";
        $(".jk_main ul").html();
        for(var i=0;i<4;i++){
            attr+="<li><div class='mon_rain'></div></li>"
        };
        $(".jk_main ul").html(attr);
        $(".jk_main ul li").css({width:"calc(100%/2 - 6px)",height:"calc(100%/2 - 6px)"})
        $(".ssjk_maptitright span").click(function(){
            var index=$(this).index();
            $(this).addClass("ssjk_active").siblings("").removeClass("ssjk_active");
            if(index==0){
                var attr="";
                $(".jk_main ul").html();
                for(var i=0;i<16;i++){
                    attr+="<li><div class='mon_rain'></div></li>"
                };
                $(".jk_main ul").html(attr);
                $(".jk_main ul li").css({width:"calc(25% - 6px)",height:"calc(25% - 6px)"});
            }
            if(index==1){
                var attr="";
                $(".jk_main ul").html();
                for(var i=0;i<9;i++){
                    attr+="<li><div class='mon_rain'></div></li>"
                };
                $(".jk_main ul").html(attr);
                $(".jk_main ul li").css({width:"calc(100%/3 - 6px)",height:"calc(100%/3 - 6px)"});
            }
            if(index==2){
                var attr="<li class='jk_big'><div class='mon_rain'></div></li>";
                $(".jk_main ul").html();
                for(var i=0;i<5;i++){
                    attr+="<li><div class='mon_rain'></div></li>"
                };
                $(".jk_main ul").html(attr);
                $(".jk_main ul li").css({width:"calc(100%/3 - 6px)",height:"calc(100%/3 - 6px)"});
                $(".jk_main ul li.jk_big").css({width:"calc(100%/3*2 - 6px)",height:"calc(100%/3*2 - 6px)"})
                $(".jk_main ul li").eq(3).css({clear:"both"});
            }
            if(index==3){
                var attr="";
                $(".jk_main ul").html();
                for(var i=0;i<4;i++){
                    attr+="<li><div class='mon_rain'></div></li>"
                };
                $(".jk_main ul").html(attr);
                $(".jk_main ul li").css({width:"calc(100%/2 - 6px)",height:"calc(100%/2 - 6px)"})
            }
            if(index==4){
                var attr="";
                $(".jk_main ul").html();
                for(var i=0;i<1;i++){
                    attr+="<li><div class='mon_rain'></div></li>"
                };
                $(".jk_main ul").html(attr);
                $(".jk_main ul li").css({width:"calc(100% - 6px)",height:"calc(100% - 6px)"});
            }
        })
    },
}

$(function(){
    common.initCatalogueMagePage();
});